@import 'setting';
@import 'reset';

html, body { height: 100%; font-size: $baseFontSize;}
.site { min-height: 100%; margin-bottom: -156px;}
.site-footer, .push { height: 156px;}

.inner { max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px;}
.site-content { padding-bottom: 30px;}

body { background: $grayLighter; font-family: $baseFontFamily;}

.btn { display: inline-block; padding: 6px 20px; border-radius: 5px;}
.btn-primary { background: $red; color: $white;
  &:hover { background: $redLight; color: $white;}
}

.site-header { padding: 15px 0 10px; margin-bottom: 20px; background: $white;
  aside { float: right; padding-top: 10px;
    .btn { margin-right: 10px;}
  }
  nav { margin-left: 160px; font-size: 18px;
    li { float: left;
      a { display: block; padding: 15px 20px;}
      &.current-menu-item {
        a { color: $red;}
      }
    }
  }
}
.site-logo { width: 132px; float: left;
  a { display: block; height: 50px; background: url(../images/logo.png) no-repeat;
    text-indent: -999em; overflow: hidden;
  }
}
.banners { height: 300px; margin-top: -20px; margin-bottom: 30px;
  li { height: 300px; background-repeat: no-repeat; background-position: 50%;}
}
.site-footer { background: $grayDarker; color: $gray;
  text-align: center;
  .inner { padding: 20px 0;}
  p { padding: 5px 0;}
  nav { margin-bottom: 10px;
    li { display: inline-block;
      a { display: block; padding: 0 15px 0 14px; line-height: 1; color: $grayLight;
        &:hover { color: $red;}
      }
      border-left: 1px solid $gray;
      &:first-child { border-left: none;}
    }
  }
}

.site-main { padding: 20px; margin-right: 380px;
  background: $white; border: 1px solid #EEEEEE;
  .page-title { padding-bottom: 15px; margin-bottom: 20px; color: $red; font-size: 20px; border-bottom: 1px solid #EEEEEE;}
}
.sidebar { float: right; width: 360px;
  .widget { background: $white; border: 1px solid #EEEEEE; padding: 20px;}
}

.widget {
  h2 { padding: 0 0 23px 35px; color: $red; font-size: 20px;
    position: relative;
    i { position: absolute; bottom: 0; left: 0;
      color: #D4D4D4; font-size: 14px; font-family: 'Arial';
      &:first-letter { font-size: 48px;}
    }
  }
}

.post-list {
  article { border-bottom: 1px solid $grayLight; padding-bottom: 20px; margin-bottom: 20px;}
  .entry-title { font-size: 20px; font-weight: bold;
    a { color: $grayDarkest;}
    .cate { display: inline-block; margin-right: 10px; position: relative; top: -1px;
      a { display: inline-block; padding: 3px 5px; border-radius: 3px;
        background: $red; color: $white; font-size: 12px; font-weight: normal;
      }
    }
  }
  .entry-content { line-height: 1.8;}
}

.breadcrumb { margin: 15px 0;
  a, span, i { display: inline-block; vertical-align: top;}
  i.fi-angle-right { width: 0; height: 0; margin: 0 10px; border: 5px solid $grayLighter; border-left-color: $gray;
    position: relative; top: 5px;
  }
}

article {
  position: relative;
  .post-edit-link { position: absolute; top: 0; right: 0;}
  .entry-content { margin-top: 14px; margin-bottom: 14px; color: $grayDark;}
}

.entry-content {
  line-height: 1.8;
  @import 'entry';
}

article.hasCover {
  .cover { float: left; width: 150px;}
  .entry-header, .entry-content, .entry-footer {
    margin-left: 170px;
  }
}

.single-post {
  .xh_social_box { margin-top: 15px;}
  .entry-content { font-size: 16px;}
  .entry-footer {
    span { color: $gray;
      &.word-count { float: left; width: 200px;}
      &.post-copyright { margin-left: 200px; text-align: right;}
    }
  }
}

// Comment list
.comments-area { margin-top: 20px; padding-top: 20px; border-top: 1px solid $grayLight;
  h2 { font-size: 18px;}
  li.comment { margin-bottom: 20px; border-bottom: 1px solid $grayLight; padding-bottom: 20px;
    ol { margin-top: 20px; padding-top: 20px; margin-left: 65px; border-top: 1px solid $grayLight;}
    .comment-respond { margin-left: 65px; padding-top: 20px;}
  }
  article { position: relative; padding-left: 65px;
    .edit-link { position: absolute; top: 0; right: 0;}
    .reply { position: absolute; bottom: 0; right: 0;}
    time { font-size: 12px; color: $gray;}
  }
  .comment-meta { margin-bottom: 10px;
    img { position: absolute; top: 0; left: 0; width: 50px; height: 50px; border: 1px solid $grayLight;}
    .comment-metadata { padding-top: 5px;}
    b { display: inline-block; margin-right: 5px;}
    .says { display: none;}
  }
  .comment-content { line-height: 1.8;}
}
